<template>
  <div class="main">
    <div class="header">
      <div class="welcome">
        <i>送餐平台</i>
      </div>
      <div class="header-img" @click="backToLogin">
        <el-avatar>{{ nickname }}</el-avatar>
      </div>
    </div>
    <div class="content">
      <div class="left">
        <el-menu default-active="1" class="el-menu-vertical-demo">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-monitor"></i>
              <span>餐馆概述</span>
            </template>
            <el-menu-item @click="changePage(11)">详细信息</el-menu-item>
            <el-menu-item @click="changePage(12)">餐馆评价</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span>人员管理</span>
            </template>
            <el-menu-item @click="changePage(21)">职工列表</el-menu-item>
            <el-menu-item @click="changePage(22)">入馆审核</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-coin"></i>
              <span>财务管理</span>
            </template>
            <el-menu-item @click="changePage(31)">员工薪资</el-menu-item>
            <el-menu-item @click="changePage(32)">统计销售</el-menu-item>
            <el-menu-item @click="changePage(33)">查看订单</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-dish"></i>
              <span>菜品管理</span>
            </template>
            <el-menu-item @click="changePage(41)">菜品一览</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <div class="right">
        <div class="right-page">
          <Information v-show="currentPage === 11"></Information>
          <Evaluation v-show="currentPage ===12"></Evaluation>
          <StafferList v-show="currentPage === 21"></StafferList>
          <StafferExamine v-show="currentPage === 22"></StafferExamine>
          <StafferSalary v-show="currentPage === 31"></StafferSalary>
          <Statistics v-show="currentPage === 32"></Statistics>
          <Order v-show="currentPage === 33"></Order>
          <Dish v-show="currentPage === 41"></Dish>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Information from "@/components/restaurant/master/Information";
import Evaluation from "@/components/restaurant/master/Evaluation";
import StafferList from "@/components/restaurant/master/StafferList";
import StafferExamine from "@/components/restaurant/master/StafferExamine";
import StafferSalary from "@/components/restaurant/master/StafferSalary";
import Statistics from "@/components/restaurant/master/Statistics";
import Order from "@/components/restaurant/master/Order";
import Dish from "@/components/restaurant/master/Dish";
import {getNickname} from "@/http/api/user";
import cookie from "js-cookie";

export default {
  name: "Master",
  components: {
    Information,
    Evaluation,
    StafferList,
    StafferExamine,
    StafferSalary,
    Statistics,
    Order,
    Dish,
  },
  data() {
    return {
      currentPage: 11,
      nickname: '',
    }
  },
  methods: {

    // 切换页面
    changePage(page) {
      this.currentPage = page
    },

    // 返回登录页
    backToLogin(){
      this.$router.push('/restaurant/login')
    },

    // 加载昵称
    async loadNickname(){
      let result = await getNickname({
        userId: cookie.get('userId'),
      })
      if (result.code === 0) {
        this.nickname = result.data.nickname
      }
    },
  },
  async mounted() {
    await this.loadNickname()
  }
}
</script>

<style lang="less" scoped>
.main {
  .header {
    height: 60px;
    width: 80%;
    margin: 0 auto;
    border-bottom: 2px solid #666;
    .welcome {
      float: left;
      width: 80%;
      font-size: 40px;
      color: red;
    }
    .header-img {
      float: right;
      width: 40px;
      height: 70%;
      padding-top: 10px;
      padding-right: 10px;
    }
  }

  .content {
    display: flex;
    width: 80%;
    margin: 0 auto;

    .left {
      width: 39%;
      flex: 1;
    }

    .right {
      width: 60%;
      flex: 4;

      .right-page {
        width: 90%;
        margin: 20px auto 50px;
      }
    }
  }
}
</style>